<template>
  <div  class="homeList-container">

  <van-cell  :class="type == 2 ? 'cle' : '' "  :to="{ name: 'ys', params: { sId: stafflist.sId  }}" >
      <div class="home-staff">
    <div class="com-icon">
      <img :src="stafflist.staffimg" alt=""></div>
    <ul class="coInfo">
         <li class="one" v-if="type == 1" ><strong>{{ stafflist.names }}</strong><span class="money"><strong>{{ stafflist.salary }}</strong>/一天</span></li>
           <li class="one" v-else-if="type == 2"><strong>{{ stafflist.names }}</strong>
               <van-button
            v-if="followed"
            @click='clickFocus'
            class="follow-btn"
            icon="plus"
            type="info"
            round
            color="#3f51b5"
            size="small"
          >关注</van-button>
          <van-button
            v-else
            @click='clickFocus'
            class="follow-btn"
            color="#3f51b5"
            round
            size="small"
          >已关注</van-button>
           </li>
              <li class="one" v-else  ><strong>{{ stafflist.names }}</strong><span class="money"><strong style="color: black"  >{{ stafflist.phone }}</strong></span></li>
         <li><van-button  v-for="(item, index) in stafflist.skillid" :key="index"  plain  type="primary" round>{{ item }}</van-button>
         </li>
         <li ><span v-if="type <= 2" >{{ stafflist.location  +' | '+stafflist.age+'岁  |  服务'+stafflist.serveSum+'户  |  评价'+stafflist.evaluateSum+'条' }}</span>
         <span v-else >{{ conames }}</span>
         </li>
     </ul>
      </div>
  </van-cell>
  </div>
</template>

<script>
// import { getCompany } from '@/api/company'

export default {
  props: {
    // 这里用来区别不同的路由跳转实现组件重用
    type: {
      type: [Number, String],
      default: 1
    },
    stafflist: {
      type: [Object, Array],
      default: null
    },
    conames: {
      type: [String],
      default: ''
    }
  },
  data () {
    return {
      followed: true // 点赞状态
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    clickFocus () {
      this.followed = !this.followed
    }
  }
}
</script>

<style scoped lang="less">
.homeList-container{
  .home-staff{
      display: flex;
      height: 160px;
  .coInfo{
     display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: normal;
    height: 100%;
    width: 100%;
    padding-left: 20px;
    line-height: normal;
    li span{
          font-size: 4px;
    }
    .one{
      display: flex;
      justify-content: space-between

    }
      .attbtn{
   color: #fff;
   background-color: #3f51b5;
   font-size: 10px;
}
    .money{
      color: #97919f;
    }

    }
   .com-icon{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 30%;
       background-color: #F9F5F5;
       img{
         width: 100%;
         height: 100%;
       }

    }
   .van-button {
       height: 40px;
       font-size: 8px;
       padding: 15px 15px;
       margin-right:15px;
       border-color: #3f51b5;
       color: #3f51b5;
     }

  }
  .cle{
    padding: 0
  }
  // .moreco{
  //   height: 60px;
  //     background-color: #fff;
  //     font-size: 25px;
  //       .van-col{
  //        vertical-align: middle
  //       }
  // }
}

</style>
